<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/cpyy.jpg"
        alt="产业运营"
      />
      <!-- <img
        :src="'http://testattachment.fuguowealth.com/' + enterpricedata.titleImg.picture"
        alt="产业运营"
      /> -->
      <h2>产业运营</h2>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
        <el-tab-pane label="财富管理" name="first">
          <WealthManage></WealthManage>
        </el-tab-pane>
        <el-tab-pane label="PE投资" name="second">
          <PeInvestment></PeInvestment>
        </el-tab-pane>
        <el-tab-pane label="矿业投资" name="third">
          <mineInvestment></mineInvestment>
        </el-tab-pane>
        <el-tab-pane label="上市公司" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import WealthManage from "./components/WealthManage.vue";
import PeInvestment from "./components/PeInvestment.vue";
import mineInvestment from "./components/mineInvestment.vue";
import { info_list } from '@/api/index.js';
export default {
  components: {
    WealthManage,
    PeInvestment,
    mineInvestment,
  },
  data() {
    return {
      activeName: "first",
      enterpricedata:[]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      const data={id:'1615202105191705263'}

      info_list(data).then(res=> {
        this.listTabledata = res.data
        console.log(res.data,'产业运营');
      })
      .catch(error=>{
          console.log(error)
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="less">
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  // tab切换
  .el-tabs__nav {
    height: 56px;
    padding: 20px 0;
    background: #f8f8f8;
    .el-tabs__item {
      height: 100%;
      line-height: 56px;
      font-size: 25px;
      border-right: 2px solid #ccc;
    }
    .el-tabs__item:nth-last-of-type(1) {
      border-right: none;
    }
    .el-tabs__item:hover {
      color: #a90621;
    }
    .el-tabs__item.is-active {
      color: #a90621;
    }
    .el-tabs__active-bar {
      background-color: #a90621;
    }
  }
}
</style>
